<script setup lang="ts">
import { Hide, View } from "@element-plus/icons-vue";
import { ref, reactive } from 'vue'
import { addTutorialAPI, putTutorialAPI } from "@/api/resource.ts";
import { useBodyStore } from "@/store/body.ts";
import type { addTutorialData } from "@/type/resource.ts";
import { ElMessage } from "element-plus";

const bodyStore = useBodyStore()
const type = ref(1)
const dialogVisible = ref(false)
const urlStr = ref('')
const descStr = ref('')
const id = ref('')
const switchOfGender = ref(true)
const ruleForm = reactive({
  name: '',
  gender: 0,
  bodyId: '',
  videoUrl: [],
  desc: []
})
const emit = defineEmits(['get'])

// 初始
const init = (row: any, number: number) => {
  type.value = number
  dialogVisible.value = true
  if (number !== 1) {
    // 编辑
    id.value = row._id
    ruleForm.name = row.name
    ruleForm.bodyId = row.bodyId._id
    urlStr.value = row.videoUrl.join(',')
    descStr.value = row.desc.join('')
  } else {
    // 添加
    id.value = ''
    ruleForm.name = ''
    ruleForm.bodyId = ''
    urlStr.value = ''
    descStr.value = ''
  }
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
  emit('get')
}

// 添加部位教程
const handleAdd = async () => {
  ruleForm.gender = switchOfGender.value ? 0 : 1
  ruleForm.videoUrl = (urlStr.value.includes(',') ? urlStr.value.split(',') : [urlStr.value]) as any
  ruleForm.desc = (descStr.value.includes('。') ? descStr.value.split('。') : [descStr.value]) as any
  const res: any = await addTutorialAPI(ruleForm as addTutorialData)
  ElMessage({
    type: res.code === 0 ? 'success' : 'error',
    message: res.message
  })
  handleCancel()
}

// 编辑教程
const handleEdit = async () => {
  ruleForm.gender = switchOfGender.value ? 0 : 1
  ruleForm.videoUrl = (urlStr.value.includes(',') ? urlStr.value.split(',') : [urlStr.value]) as any
  ruleForm.desc = (descStr.value.includes('。') ? descStr.value.split('。') : [descStr.value]) as any
  const res: any = await putTutorialAPI(id.value, ruleForm)
  ElMessage({
    type: res.code === 0 ? 'success' : 'error',
    message: res.message
  })
  handleCancel()
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加部位">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      style="padding: 0 50px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" autocomplete="off"/>
      </el-form-item>
      <div class="row" style="justify-content: space-between">
        <el-form-item label="性别" prop="gender">
          <el-switch
            style="--el-switch-off-color: #ea78fc"
            v-model="switchOfGender"
            :active-action-icon="View as any"
            :inactive-action-icon="Hide as any"
            active-text="男"
            inactive-text="女"
          />
        </el-form-item>
        <el-form-item label="部位">
          <el-select v-model="ruleForm.bodyId" clearable placeholder="Select">
            <el-option
              v-for="item in bodyStore.bodyList"
              :key="item._id"
              :label="item.nickname"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="链接">
        <el-input v-model.lazy="urlStr" type="text" placeholder="若为多个视频链接，请用,分隔" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model.lazy="descStr" type="text" autocomplete="off" placeholder="请用。分隔段落"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleAdd" v-if="type === 1">
          确定
        </el-button>
        <el-button type="primary" @click="handleEdit" v-else>
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
